<template>
	<view class="container">
		<!-- 房间列表 -->
		<view class="item" :data-index="index" @tap="onHouseDetail" v-for="(item, index) in house" :key="index">
			<!-- 定位图标 房间名 -->

			<view style="display: flex; margin-top: 10rpx">
				<image src="/static/assets/house_16.png" style="width: 26rpx; height: 32rpx; margin-left: 20rpx; margin-top: 16rpx"></image>
				<view class="item_name">{{ item.name }}</view>
			</view>

			<!-- 业主信息 房间面积 -->

			<view style="display: flex; margin-left: 20rpx; margin-top: 20rpx; justify-content: space-between">
				<view style="font-size: 28rpx; color: #999999">业主：{{ item.owner_name }}</view>
				<view style="color: #999999; font-size: 28rpx; margin-right: 30rpx">面积：{{ item.total_area }}㎡</view>
			</view>

			<view class="item_desc">房屋性质：{{ item.nature }}</view>
		</view>

		<view v-if="!house || house.length <= 0" style="margin: 300rpx auto; color: #cccccc">暂无数据~</view>
	</view>
</template>

<script>
	const app = getApp() // 获取应用实例
	const util = require('../../../../utils/util')
	import { getRoomList } from '../../../../utils/http/api'
	export default {
		data() {
			return {
				// 来源标识 1 报修页面选择房间
				from: '',
				// 数据格式 {id:'',name:'',owner_tel:'',owner_name:'',enter_time:'',total_area:'',nature:'',status:''}
				house: [],
				currRoom: ''
			}
		},
		onLoad(options) {
			this.setData({ from: options.from })
			this.reqRoomList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.reqRoomList()
		},
		methods: {
			// onHouseDetail 点击查看房间详情
			onHouseDetail(e) {
				let index = e.currentTarget.dataset.index;
				let currRoom = this.house[index];
				if (this.from == '1') {
					// 报修页面选择房间
					let pages = getCurrentPages() // 获取当前页面pages里的所有信息。
					let prevPage = pages[pages.length - 2] // prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面，-3是上上个页面以此类推。
					prevPage.setData({
						// 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。
						currRoom: currRoom
					})
					//上一个页面内执行setData操作，将我们想要的信息保存住。当我们返回去的时候，页面已经处理完毕。
					uni.navigateBack() // 关闭当前页面
				} else {
					let id = this.house[index].id
					let url = '/pages/charge/house/house_detail/house_detail?id=' + id
					util.navigateTo(url)
				}
			},

			// 请求我的房间列表
			async reqRoomList() {
				uni.showLoading({ title: '处理中', mask: true })
				let { code, msg, data } = await getRoomList({ page: '1', limit: '999999', token: app.globalData.gl.token })
				uni.stopPullDownRefresh()
				if (code == '1') {
					this.setData({ house: data.data })
				} else {
					uni.showToast({ title: msg, icon: 'error' })
				}
			}
		}
	};
</script>
<style scoped>
	.container {
		display: flex;
		width: 100%;
		height: 100%;
		flex-direction: column;
	}

	.item {
		display: flex;
		flex-direction: column;
		width: auto;
		height: auto;
		position: relative;
		margin-top: 20rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
		border-width: 5rpx;
		border-color: #f8f8f8;
		border-style: solid;
		border-radius: 10rpx;
	}

	.item_name {
		width: 200rpx;
		height: auto;
		flex-grow: 1;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
		font-size: 30rpx;

		display: -webkit-box;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.item_desc {
		height: 60rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #999999;
	}

	/* 重写 checkbox 样式 */
	checkbox .wx-checkbox-input {
		margin-right: 20rpx;
		border-radius: 50%;
		/* 圆角 */
		width: 34rpx;
		/* 背景的宽 */
		height: 34rpx;
		/* 背景的高 */
	}

	/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		border: 1rpx solid #ff9900;
		background: #ff9900;
	}

	/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		border-radius: 50%;
		/* 圆角 */
		width: 30rpx;
		/* 选中后对勾大小，不要超过背景的尺寸 */
		height: 30rpx;
		/* 选中后对勾大小，不要超过背景的尺寸 */
		line-height: 30rpx;
		text-align: center;
		font-size: 30rpx;
		/* 对勾大小 30rpx */
		color: #fff;
		/* 对勾颜色 白色 */
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}
</style>